<template>
	<view class="page pageBg" :style="{ backgroundImage: `url(${staticBg}listBj.png)`}">      
		<headnav leftText="售后详情"></headnav> 
		<scroll-view scroll-y="true"  class="scroll-v pageScroll">
		    <view class="pageBox" v-if="model.audit_status_str">
				<view class="status block">
					<text>{{model.audit_status_str}}</text>
				</view>
				<!-- 以下是售后 -->
				<view class="back-name after block">
					<view class="head">
						{{model.order.student.student_history.store_name}}
					</view>
					<view class="body" v-if="items.data">
						<view class="name">{{model.order.activity.alias}}</view>
						<view class="af-info" v-for="(item,index) in items.data" :key="index">
							<view class="af-name">
								<text v-if="is_pre == 1">【预售】</text> 
								{{item.order_goods.goods_name}}
							</view>
							<view class="af-num">
								<text>× {{item.order_goods.quantity}}</text>
								<text class="priceBox">售价：<text class="price">¥ {{item.order_goods.goods_sale_price}}</text></text>
							</view>
						</view>
					</view>
				</view>
				<!-- TODO -->
				<view class="dlsleft"> 
					<view class="dl" v-if="model.no">
					    退款方式：
						<text v-if="model.refund_type == 1">仅退款</text>
						<text v-if="model.refund_type == 2">退款退货</text>
					</view>
					<view class="dl" v-if="model.no">
						退款原因：{{model.reason_str}}
					</view>
					<view class="dl" v-if="model.no">
						退款编号：{{model.no}}
					</view>
					<view class="dl" v-if="model.no">
						申请时间：{{model.created_at}}
					</view>
					<view class="dl" v-if="model.no">
						审核时间：{{model.handle_at}}
					</view>
					<view class="dl">
						售后状态状态：{{model.audit_status_str}}
					</view>
				</view>
				<view class="bottomBtn" v-if="model.audit_status_str == '审核未通过'">
					<view class="bt bt-a" @tap="reAppy(model.id,model.order.after_sale_status)">重新申请</view>
				</view>
			</view>
		</scroll-view>
		<view class="totelBotttom" v-if="model.btn && model.btn.length > 1">
			<view class="rightWrap">
				<view class="o-btn" @tap="RemoveAfter(model.id)" :class="{active:item.k == 2}"  v-for="(item,index) in model.btn" v-if="item.k != 1 && item.k != 8" :key="index">{{item.v}}</view>
			</view>
		</view>	
	</view>
</template>
<script>

import { orderDetials, paycancel, afterAaleDetail, removeAfter } from '@/api/goods.js'
	export default {
		components:{
			
		},
		data() { 
			return {
				id:'',
				goods:[],
				items:{},
				model:{},
				order_status:-1,
				is_pre:''
			}
		},
		onLoad() {
			this.id = this.$Route.query.id
			this.AfterAaleDetail();
		},
		methods: {
			//prepayment_type预付类型 1主单 2子单 0非预付订单
			async  AfterAaleDetail () {
				const { data } = await afterAaleDetail({id:this.id}) 
				if(data) {
					this.goods = data.item.data;
					this.model = data.model;
					this.items = data.item;
					this.is_pre = this.model.order.prepayment_type;
					this.order_status = this.model.show_status;
					// console.log('is_pre',this.is_pre);
					// // console.log('order_status',this.order_status);
					// console.log('model',this.model);
					// console.log('items',this.items);
					console.log(this.model.btn);
				}
			},
			async RemoveAfter(id) {
				console.log(id);
				const  res = await removeAfter({after_sale_id:id});
				
				if(res) {
					this.toast("操作成功")
					setTimeout(() => {
						uni.navigateBack();
					},300)
				}
			},
			scrolltolower() {
				
			},
			reAppy(id,select) {
				// console.log(id);
				// console.log(select);
				let parms;
				 if(select == 1) {
					 parms = 1;
				 } else {
					  parms = 2;
				 }
				this.$Router.push('/pages/afterInput/afterInput?id=' + id + '&select=' + parms)
			},
			togleOpen() {
				this.open = !this.open;
			},
			gochangeSchool() {
				uni.navigateTo({
					url:'/pages/changeSchool/changeSchool'
				})
			},
			countChange() {
				
			},
			change(e) {
				this.swiper.current = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/dls.scss";
	@import "@/static/css/detial.scss";
	.page {
		background-color: #f5f8fa;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	
	.red {
		color:#ff4f4f;
	}
	.colorh {
		color:#a6a6a6;
	}
	.pageBox {
		padding-bottom: 130rpx;
		.status {
			height: 102rpx;
			// display: flex;
			padding-top: 14rpx;
			font-size: 36rpx;
			color:#3c84f4;
			font-weight: bold;
			padding-left: 32rpx;
			.red {
				color:#ff4f4f;
			
			}
			
		}
	}
	
	.back-name {
		background-color: #fff;
		font-size: 30rpx;
		line-height: 40rpx;
		padding: 36rpx 35rpx 4rpx;
		margin-bottom: 30rpx;
		    &.after {
				background-color: #fff;
			    padding: 0 30rpx;
					 &:last-of-type {
							  margin-bottom: 0;
						  }
						  .head {
							height: 72rpx;
							width: 100%;
							display: flex;
							padding-top: 30rpx;
							position: relative;
							.h-icon {
								width: 35rpx;
								height: 35rpx;
								margin-right: 20rpx;
							}
							.h-icon2 {
								margin-left: 20rpx;
								width: 14rpx;
								height: 22rpx;
								top: 2rpx;
								position: relative;
							}
							.status {
								color:#ff4f4f;
								position: absolute;
								top:26rpx;
								right: 0;
								font-size: 29rpx;
							}
						  }
						  .body {
							  padding: 15rpx 0 16rpx;
							  border-bottom: 1px solid #f5f5f5;
							  .name {
								  color: #333333;
								  font-size: 32rpx;
								  line-height:48rpx;
								  margin-bottom: 15rpx;
							  }
							  .f-name {
								  color:#a6a6a6;
								  font-size: 28rpx;
								  margin-bottom: 8rpx;
								  .price {
									  color:#ff4f4f;
								  }
							  }
							  .af-info {
								  background-color: #f7f7f7;
								  padding: 32rpx 32rpx 22rpx; //10
								  line-height: 40rpx;
								  border-radius: 20rpx;
								  margin-bottom: 10rpx;
								  .af-name {
									  font-size: 28rpx;
									  margin-bottom: 5rpx;
								  }
								  .af-num {
									  font-size: 26rpx;
									  color:#a6a6a6;
									  .priceBox {
										  margin-left: 15rpx;
									  }
									  .price {
										  color:#ff4f4f;	
									  }
								  }
							  }
						  }
						  .foot {
							  width: 100%;
							  height: 118rpx;
							  display: flex;
							  justify-content: space-between;
							  align-items: center;
							  .left, .right {
								  .left-text {
									  margin-right: 20rpx;
									  font-size: 29rpx;
								  }
								  display: flex;
							  }
						  }
				}
			
		   .back-name-item {
			margin-bottom: 30rpx;
			// &:last-of-type {
			// 	margin-bottom: 0;
			// }
			position: relative;
			.back-btn {
				width: 155rpx;
				height: 64rpx;
				background-color: #ffebeb;
				color:#ff4f4f;
				border-radius: 18rpx;
				position: absolute;
				right: 0;
				top:75rpx;
				font-size: 26rpx;
				z-index: 9999999;
				@include center;
			}
		}
		.b-title {
			margin-bottom: 10rpx;
			
		}
		.b-num {
			height: 56rpx;
			line-height: 56rpx;
			font-size: 29rpx;
			.marR{
				margin-right: 30rpx;
			}
			
		    position: relative;
			.num {
				
				
			}
			.posR {
				position: absolute;
				right: 0;
				top:2rpx;
				font-size: 28rpx;
			}
		}
	}
	
	
	.bottomBtn {
		padding-top: 55rpx;
		@include bt-s-1();
	}
	
</style>
